<template>
	<view class="content">
		<scroll-view scroll-y="true" class="scroll">
			<image class="header" :src="activity.img" mode="widthFix"></image>
			<view v-for="(item,index) in showList" style="margin-bottom: 40rpx;">
				<view class="list">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="info">
						<view v-for="(line,i) in item.info">
							<text v-if="line.type==1"
								:style="i==item.info.length-1?'padding-bottom:10rpx;':''">{{line.data}}</text>
							<image v-if="line.type==2" :src="line.data"></image>
						</view>
					</view>
				</view>
				<view class="antique" v-if="false">
					<secTitle class="secTitle" title="精品书画" color="#B9AC90" :showMore="true" type="show" moreText="查看"
						@goTo="goTo(arguments)">
					</secTitle>
					<view class="item">
						<antiqueFLexItem style="flex: 1;" title="山水画轴" first="明/文伯仁" second="清(1616~1911)">
						</antiqueFLexItem>
						<antiqueFLexItem style="flex: 1;" title="五大真图手卷" first="清/易熉" second="清(1616~1911)">
						</antiqueFLexItem>
					</view>
				</view>
			</view>
		</scroll-view>
		<button class="join" @click="order">预约展览</button>

		<cover-view class="left-side" v-if="showBar" @touchmove.stop.prevent="moveHandle">
			<view class="item" v-for="(item,index) in lineList">
				<image :src="index==selectIndex?iconList[1]:iconList[0]"></image>
				<text>{{item}}</text>
			</view>
		</cover-view>
	</view>
</template>

<script>
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import antiqueFLexItem from '../customer/antiqueFLexItem.vue'
	import secTitle from '../customer/secTitle.vue'
	export default {
		components: {
			antiqueFLexItem,
			secTitle,
		},
		onLoad(option) {
			this.id = option.id
			this.getAct(option.id)
		},
		data() {
			return {
				id: 0,
				showBar: false,
				selectIndex: 0,
				iconList: [
					'../../static/interactive_icon_default@2x.png',
					'../../static/interactive_icon_selected@2x.png'
				],
				lineList: [],
				showList: [],

				img: "",
				title: "",

				activity: {
					img: ""
				}
			}
		},
		methods: {
			getAct(id) {
				doGet('/blade-museum/act/getOne?id=' + id, (res) => {
					res.startDate = dateToString(new Date(res.startTime.replace(/-/g,'/')), 'yyyy年MM月dd日')
					this.getDataList(res.contentList)
					this.activity = res
				}, (err) => {})
			},
			getDataList(data) {
				let list = []
				let showList = []
				let line
				for (let item of data) {
					if (item.type == 0) {
						if (line) {
							showList.push(line)
						}
						list.push(item.content)
						line = {
							title: item.content,
							info: []
						}
					} else {
						line.info.push({
							type: item.type,
							data: item.content
						})
					}
				}
				if (line) {
					showList.push(line)
				}
				this.lineList = list
				this.showList = showList
			},
			moveHandle() {

			},
			goTo(e) {
				uni.navigateTo({
					url: "./showAntiqueList"
				})
			},
			order() {
				uni.navigateTo({
					url: '../order/order'
				})
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		height: calc(100% - 88rpx);
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.scroll {
		/* position: fixed; */
		height: calc(100% - 0rpx);
		width: 100%;
		background: #eee;
		display: flex;
		flex-direction: column;
	}

	.header {
		width: 100%;
	}

	.list {
		height: auto;
		padding: 20rpx;
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0rpx 20rpx;
		background: #fff;
		border-radius: 5rpx;
	}

	.list .title {
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
	}

	.list .info {
		width: 100%;
		font-size: 32rpx;
		color: #666;
		line-height: 60rpx;
		padding: 20rpx 0 0 0;
		display: flex;
		flex-direction: column;
	}

	.list .info text {
		display: inline-block;
		text-align: justify;
		text-indent: 2em;
	}

	.list .info image {
		width: 100%;
		height: 400rpx;
	}

	.antique {
		width: 100%;
		margin-top: 20rpx;
	}

	.antique .secTitle {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
	}

	.antique .item {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.join {
		height: 100rpx;
		line-height: 100rpx;
		border: 0;
		background: #B9AC90;
		width: 100%;
		color: #fff;
		border-radius: 0;
		font-size: 30rpx;
	}

	.left-side {
		position: fixed;
		height: calc(100% - 88rpx);
		width: 75%;
		background: #00000099;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.left-side .item {
		margin: 30rpx 40rpx;
		width: calc(100% - 80rpx);
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.left-side .item text {
		margin-left: 40rpx;
		line-height: 50rpx;
		font-size: 36rpx;
		color: #fff;
	}

	.left-side .item image {
		width: 40rpx;
		height: 40rpx;
	}
</style>
